<template>
	
	<div class="modal-backdrop">
     <div class="modal" :style="mainStyles">
	
	<div class="all">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  
  <el-form-item label="性别" prop="sex">
    <el-select v-model="ruleForm.sex" placeholder="性别">
      <el-option label="男" value="man"></el-option>
      <el-option label="女" value="female"></el-option>
     </el-select>
  </el-form-item>
  
  <el-form-item label="角色" prop="role">
  	<el-input v-model="ruleForm.role"></el-input>
  </el-form-item>
  
  
   <el-form-item label="出生日期"  prop="birthday">
  	<el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%;" :disabled="true"></el-date-picker>
    </el-col>
  </el-form-item>
  
  <el-form-item label="手机" prop="phone">
  	<el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>
  
  <el-form-item label="邮箱" prop="email">
  	<el-input v-model="ruleForm.email"></el-input>
  </el-form-item>
  
  <el-form-item label="职位" prop="sid">
    <el-select v-model="ruleForm.sid" placeholder="请选择职业">
      <el-option label="前端" value="QD"></el-option>
      <el-option label="java" value="JA"></el-option>
      <el-option label="测试" value="CS"></el-option>
      <el-option label="信息安全" value="XA"></el-option>
      <el-option label="人工智能" value="RN"></el-option>
      <el-option label="产品经理" value="CL"></el-option>
    </el-select>
  </el-form-item>
  
  <el-form-item label="公司" prop="company">
  	<el-input v-model="ruleForm.company" :disabled="true"></el-input>
  </el-form-item>
  
  <el-form-item label="部门" prop="department">
  	<el-input v-model="ruleForm.department" :disabled="true"></el-input>
  </el-form-item>
  
  <el-form-item label="入职时间"  prop="entrytime" >
  	<el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.entrytime" style="width: 100%;" :disabled="true"></el-date-picker>
    </el-col>
  </el-form-item>
  
  <el-form-item label="宿舍" prop="hostel">
  	<el-input v-model="ruleForm.hostel"></el-input>
  </el-form-item>
  
  <el-form-item label="离职时间"  prop="leavetime">
  	<el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.leavetime" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
  
  <el-form-item label="修改时间" prop="altertime">
  	<el-input v-model="ruleForm.altertime" :disabled="true"></el-input>
  </el-form-item>
  
  <el-form-item label="积分" prop="Integral">
  	<el-input v-model="ruleForm.Integral" :disabled="true"></el-input>
  </el-form-item>
  
    <el-form-item label="密码" prop="password">
  	<el-input v-model="ruleForm.password" autocomplete="off" type="password" show-password></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    <el-button @click="closeSelf">取消</el-button>
  </el-form-item>
</el-form>

</div>



</div>
	 </div>
</template>

<script>

  export default {
   props: {
    width:{
        type:[Number,String],//类型检测
        default:300 //父组件没传width时的默认值
    },
    height:{
    	type:[Number,String],//类型检测
        default:300 //父组件没传width时的默认值
    }
  },
  
    data() {
      return {
        ruleForm: {
          name: '渣渣',
          sex:'女',
          role:'普通用户',
          phone:'18898868830',
          email:'458758555@qq.com',
          sid: '前端',
          company:'xxxx',
          department:'xxxxx',
          hostel: '4B302',
          altertime:'xxxxx',
          birthday: new Date('2019-9-18'),
          entrytime: new Date('2019-9-18'),
          leavetime: new Date('2019-9-18'),
          Integral:'0',
          password:'123456'
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],        
          role: [
            { required: true, message: '请输入角色', trigger: 'blur' }
          ],
          birthday:[
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
          ],
          sid: [
            { required: true, message: '请选择职位', trigger: 'change' }
          ],
          company: [
            { required: true, message: '请输入公司', trigger: 'blur' }
          ],
          department: [
            { required: true, message: '请输入部门', trigger: 'blur' }
          ],
          entrytime:[
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
           hostel: [
            { required: true, message: '请输入宿舍', trigger: 'blur' }
          ],
          leavetime:[
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          altertime:[
            { required: true, message: '请修改时间', trigger: 'blur' },
          ],
          Integral:[
            { required: true, message: '请输入积分', trigger: 'blur' },
          ],
          password:[
            { required: true, message: '请修改密码', trigger: 'blur' },
          ]
        }
      };
    },
     computed:{
     //计算属性来响应width属性，实时绑定到相应DOM元素的style上
      mainStyles() {
          let style = {};
          style.width = `${parseInt(this.width)}px`;
          style.height = `${parseInt(this.height)}px`;
          return style;
      }      
  },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('修改成功');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //响应关闭按钮点击事件，通过$emit api通知父组件执行父组件的on-cancel方法
    closeSelf() {
        this.$emit('on-cancel');
    }
    }
  }
</script>

<style scoped="scoped">
	.all{
		width:90%;
		height: 60%;
		margin:20px;
	}
   .modal-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,.3); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
   .modal { 
    background-color: #fff; 
    box-shadow: 2px 2px 20px 1px; 
    overflow-x:auto; 
    display: flex; 
    flex-direction: column;
    /*width: 700px;*/
    margin:0 auto;
    position:absolute;
    top:90px;
    border-radius: 5px;
    /*transform:translateY(-50%);*/
    
} 
</style>